<template>
	<view class="container">
		<uwo-nav-bar bgColor="#2979ff" textColor="#FFFFFF" :isBack="true">
			<template #content>微信公众号网页</template>
			<template #right>操作</template>
		</uwo-nav-bar>

		<view class="uni-px-8 bg-white">
			<!-- 基础表单校验 -->
			<uni-forms :border="true" ref="myForm" :modelValue="formData" :label-width="95">
				<uni-forms-item
					label="文件上传:"
					required
					name="appendix"
					:rules="[
						{
							required: true,
							errorMessage: '文件不能为空'
						}
					]"
				>
					<uwo-upload-wxjs
						v-model="formData.appendix"
						:uploadUrl="getEnv().API_URL_UPLOAD"
						:staticUrl="getEnv().API_URL_STATIC"
						:choose="chooseImage"
						:maxCount="5"
						:disabled="false"
						:headers="tokenUtil.getTokenHeader"
						:params="{}"
					></uwo-upload-wxjs>
					<view class="text-info">建议宽高比例750*450</view>
				</uni-forms-item>
				<uni-forms-item
					label="扫码:"
					required
					name="qrcode"
					:rules="[
						{
							required: true,
							errorMessage: '内容不能为空'
						}
					]"
				>
					<view class="">
						<view class="text-view">
							<view class="text"><uni-easyinput trim="all" v-model="formData.qrcode" placeholder="" /></view>
							<view class="action" @click="scanQrcode">扫码</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<uni-row :gutter="10" class="uni-mt-10 uni-px-8">
			<uni-col :span="24">
				<button class="cu-btn lg block bg-primary" @click="submit()">提交</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get, getEnv } from '@/common/config.js';
import tokenUtil from '@/common/js/tokenUtil.js';
import WxJs from '@/uni_modules/uwo-wxjs/components/uwo-wxjs/WxJs.js';
let wxjs;
const formData = ref({
	appendix: [],
	qrcode: ''
});
const myForm = ref();

onLoad(() => {
	/**
	 * 初始化微信js
	 */
	get(`${getEnv().API_URL_APP}/v1/wx/jsapi/signature?url=${window.location.href}`).then((res) => {
		if (res.code === 1) {
			const data = res.data;
			wxjs = new WxJs({
				jsApiList: ['chooseImage', 'scanQRCode'],
				appid: getEnv().appid,
				data
			});
		}
	});
});
/**
 * 微信js选择图片
 */
const chooseImage = () => {
	return new Promise((resolve, reject) => {
		wxjs.chooseImage()
			.then((res) => {
				wxjs.getLocalImgData(res[0]).then((localData) => {
					resolve(localData);
				});
			})
			.catch((e) => {
				reject(e);
			});
	});
};
const scanQrcode = () => {
	wxjs.scanQRCode(['qrCode']).then((res) => {
		formData.value.qrcode = res;
	});
};

const submit = () => {
	myForm.value
		.validate()
		.then((res) => {
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			});
		})
		.catch((err) => {
			console.log('err', err);
		});
};
</script>

<style lang="scss" scoped>
.container {
}
</style>
